<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>verdaccio</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入Element UI JavaScript 库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-header> </el-header>
        <div style="padding: 0 20px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="私库包下载统计" name="first"></el-tab-pane>
            <el-tab-pane label="en文件替换" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 表格展示 -->
        <el-main v-if="activeName === 'first'">
          <div class="header-btn">
            <el-button type="primary" size="mini" @click="handleClick" :loading="isLogLoading">解析下载日志</el-button>
            <el-button type="primary" size="mini">下载文件en.json</el-button>
          </div>
          <div class="table-box">
            <el-table :data="tableData" size="mini" border stripe>
              <el-table-column prop="packageName" label="插件包名"> </el-table-column>
              <el-table-column prop="version" label="版本号"> </el-table-column>
              <el-table-column prop="value" label="下载数量"> </el-table-column>
            </el-table>
          </div>
        </el-main>
        <el-main v-if="activeName === 'second'">
          <el-table :data="enJsonData" size="mini" border stripe style="width: 100%" height="340">
            <el-table-column prop="Name" label="词条"> </el-table-column>
            <el-table-column prop="Value" label="原始译文"> </el-table-column>
            <el-table-column prop="new" label="校对译文"> </el-table-column>
            <el-table-column prop="备注" label="备注"> </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data: {
        tableData: [],
        enJsonData: [],
        transformenJsonData: [],
        activeName: 'first',
        fileList: [],
        isLogLoading: false
      },
      mounted() {
        console.log(1)
        this.handleClick()
      },
      methods: {
        handleClick() {
          this.isLogLoading = true

          $.ajax({
            // url: `http://10.12.137.104:9999/ENAPI/readFile/enJson?str=${111}`,
            url: `/api/getPm2VerdaccioLogs`,
            type: 'get',
            hideNotice: true,
            success: (res) => {
              this.isLogLoading = false
              this.tableData = res?.data?.downloadLogs?.packageTotal || []
            }
          })
        }
      },
      components: {}
    })
  </script>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #f4f4f4;
    }
    #app {
      width: 100%;
      height: 100%;
    }
    .el-container {
      width: 100%;
      height: 100%;
    }
    .el-header {
      background-color: #4b5e40;
    }
    .el-main {
      padding: 0 20px;
      display: inline-flex;
      flex-direction: column;
    }
    .header-btn {
      margin-bottom: 20px;
    }
    .table-box {
      flex: 1;
    }
    .el-table {
      width: 100%;
      height: 100%;
    }
  </style>
</html>
